<template>
  <!-- 内嵌 -->
  <div class="page">
    <div class="flowchart-area">
      <div class="flowchart-area">
        <flowchartSvg />
      </div>
    </div>
  </div>
</template>

<script>
import flowchartSvg from '@/views/components/flowchartSvg.vue'

export default {
  name: 'flowchart',
  components: {
    flowchartSvg
  },
  data() {
    return {
      curNode: {},
      defaultkey: [1],
      groupLists: [
        {
          id: 1,
          label: '测试模板'
        },
        {
          id: 2,
          label: '测试模板2'
        }
      ],
      rules: {
        templateName: [
          { required: true, message: '输入不能为空', trigger: 'blur' }
        ]
      },
      addDialogVisible: false,
      ruleForm: {},
      dialogText: '添加模板'
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.pointer {
  cursor: pointer;
}
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.flowchart-area {
  display: flex;
}
.tree-area {
  width: 240px;
  border-right: solid 1px #dcdcdc;

  .menu-list {
    margin: 10px;
    border-bottom: solid 1px #dcdcdc;
    i {
      padding: 8px;
    }
  }
}
.flowchart-area {
  width: calc(100%);
  height: 100%;
}
::v-deep .el-tree-node__content {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  padding-left: 2px;
}
::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 0;
}
::v-deep .el-dialog__body {
  padding-bottom: 0px;
}
</style>
